/*
* MelodyUI v1.0 | Design & build by @MAlenxaderSV | Licensed under the Microsoft Public License (Ms-PL) 
* http://melodyui.codeplex.com/ | https://github.com/MAlexanderSalazar/melodyui/
*/
(function () {
    var $mel = new function () {

        var nb, tb;

        var fn = {
            isDescendant: function (a, b) {
                if (b) {
                    while ((b = b.parentNode)) {
                        if (b === a) {
                            return true;
                        }
                    }
                }
                return false;
            },
            event: function (element, event, fn) {
                if (element.addEventListener) {
                    element.addEventListener(event, fn, false);
                }
                else if (element.attachEvent) {
                    element.attachEvent('on' + event, fn);
                }
            }
        };

        this.setupNotifications = function () {
            nb = document.createElement("div");
            nb.setAttribute("class", "mel i-notification-container");
            document.body.appendChild(nb);
        };

        this.setupToasts = function () {
            tb = document.createElement("div");
            tb.setAttribute("class", "mel i-toast-container");
            document.body.appendChild(tb);
        };

        this.clearNotifications = function () {
            nb.innerHTML = "";
        };

        this.clearToasts = function () {
            tb.innerHTML = "";
        };

        var messageBase = {
            messageType: null,
            htmlItem: null,
            container: null,
            content: null,
            show: function (opts) {
                var me = this;
                me.opts = opts || {};

                if (me.opts.cssClass === undefined) {
                    me.opts.cssClass = "i-solid-light";
                }

                if (me.opts.autoClose === undefined) {
                    me.opts.autoClose = true;
                }

                if (me.opts.duration === undefined) {
                    me.opts.duration = 5400;
                }

                me.htmlItem = document.createElement("div");
                me.htmlItem.setAttribute("class", "mel i-hover " + me.messageType + " " + me.opts.cssClass);

                if (me.opts.title !== undefined) {
                    var title = document.createElement("p");
                    title.innerHTML = this.opts.title;
                    if (me.messageType == "i-notification") {
                        title.setAttribute("class", "mel i-title");
                    } else {
                        title.setAttribute("class", "mel i-subheader");
                    }
                    me.htmlItem.appendChild(title);
                }

                if (me.opts.click !== undefined && typeof me.opts.click == "function" && me.messageType === "i-notification") {
                    fn.event(me.htmlItem, "click", function (e) {
                        e.cancelBubble = true;
                        me.opts.click();
                    });
                    me.htmlItem.style["cursor"] = "pointer";
                }

                var msg = document.createElement("p");
                msg.innerHTML = me.content;
                msg.setAttribute("class", "mel i-text");
                this.htmlItem.appendChild(msg);

                var closebutton = document.createElement("button");
                closebutton.setAttribute("class", "close");
                closebutton.innerHTML = "x";
                fn.event(closebutton, "click", function (e) {
                    e.cancelBubble = true;
                    me.close();
                });
                this.htmlItem.appendChild(closebutton);

                if (this.opts.autoClose) {
                    setTimeout(function () {
                        me.close();
                    }, this.opts.duration);
                }

                this.container.appendChild(this.htmlItem);
            },
            close: function (fireEvent) {
                var me = this;
                if (fn.isDescendant(me.container, me.htmlItem)) {
                    me.container.removeChild(me.htmlItem);
                    if (me.opts.close !== undefined && typeof me.opts.close == "function" && fireEvent === undefined) {
                        me.opts.close();
                    }
                }
            }
        };

        this.notify = function (content, opts) {
            var base = Object.create(messageBase);
            base.messageType = "i-notification";
            base.container = nb;
            base.content = content;
            base.show(opts);
        };

        this.toast = function (content) {
            var base = Object.create(messageBase);
            base.messageType = "i-toast";
            base.container = tb;
            base.content = content;

            this.show = function (opts) {
                base.close(false);
                base.show(opts);

                if (base.opts.commands !== undefined) {
                    var btns = document.createElement("p");
                    btns.setAttribute("class", "buttons");

                    for (var name in base.opts.commands) {
                        var btn = document.createElement("button");
                        btn.setAttribute("class", "mel i-button");
                        btn.innerHTML = name.toString();
                        btn.onclick = base.opts.commands[name];
                        btn.onmouseenter = function () {
                            var style = window.getComputedStyle(base.htmlItem);
                            this.style["background-color"] = style.getPropertyValue("color");
                            this.style["color"] = style.getPropertyValue("background-color");
                        };
                        btn.onmouseleave = function () {
                            this.removeAttribute("style");
                        };
                        btns.appendChild(btn);
                    }

                    base.htmlItem.appendChild(btns);
                }
            };

            this.close = function () {
                base.close();
            };
        };

        this.dialog = function (content) {
            var options = null, overlay = null;

            this.show = function (opts) {
                options = opts || {};

                if (opts.cssClass === undefined) {
                    opts.cssClass = "i-solid-light";
                }

                overlay = document.createElement("div");
                overlay.setAttribute("class", "mel i-overlay");

                var dialog = document.createElement("div");
                dialog.setAttribute("class", "mel i-dialog i-hover " + opts.cssClass);

                var dialogContent = document.createElement("div");
                dialogContent.setAttribute("class", "mel i-dialog-content");

                if (opts.title !== undefined) {
                    var title = document.createElement("p");
                    title.innerHTML = opts.title;
                    title.setAttribute("class", "mel i-subheader");
                    dialogContent.appendChild(title);
                }

                var msg = document.createElement("p");
                msg.innerHTML = content;
                msg.setAttribute("class", "mel i-text");
                dialogContent.appendChild(msg);

                if (opts.commands !== undefined) {
                    var btns = document.createElement("p");
                    btns.setAttribute("class", "buttons");

                    for (var name in opts.commands) {
                        var btn = document.createElement("button");
                        btn.setAttribute("class", "mel i-button");
                        btn.innerHTML = name.toString();
                        btn.onclick = opts.commands[name];
                        btn.onmouseenter = function () {
                            var style = window.getComputedStyle(dialog);
                            this.style["background-color"] = style.getPropertyValue("color");
                            this.style["color"] = style.getPropertyValue("background-color");
                        };
                        btn.onmouseleave = function () {
                            this.removeAttribute("style");
                        };
                        btns.appendChild(btn);
                    }

                    dialogContent.appendChild(btns);
                }

                dialog.appendChild(dialogContent);
                overlay.appendChild(dialog);
                document.body.appendChild(overlay);
            };

            this.close = function () {
                if (fn.isDescendant(document.body, overlay)) {
                    document.body.removeChild(overlay);

                    if (options.close !== undefined && typeof options.close == "function") {
                        options.close();
                    }
                }
            };
        };

        fn.event(window, "load", function () {
            $mel.setupNotifications();
            $mel.setupToasts();
        });
    };

    window.$mel = $mel;

})();
